<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=640,user-scalable=no,target-densitydpi=device-dpi">
<title></title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
html,body{margin: 0;padding: 0;width: 100%;height: 100%;}
html{background-color: #ccc;}
body{width: 640px;margin: 0 auto;box-sizing: border-box;}
.app{width:640px;height: 100%;position: relative;overflow: hidden;}
.page{border: 0;position: absolute;width: 100%;height: 100%;background-position: top center;background-size: cover;box-sizing: border-box;-webkit-box-orient: vertical;overflow: hidden;z-index: 0;-webkit-transform-origin: center center;display: none;font-size: 24px;}
.page-move{display: block;}
.page{background-size:cover;}
.text-center{text-align: center;}
</style>
</head>
<body>
<div class="app" id="app">
	<div class="page page-move">
		<h1>1</h1>
	</div>
	<div class="page">
		<h1>2</h1>
	</div>
	<div class="page">
		<h1>3</h1>
	</div>
	<div class="page">
		<h1>4</h1>
	</div>
	<div class="page">
		<h1>5</h1>
	</div>
	<div class="page">
		<h1>6</h1>
	</div>
</div>
<script type="text/javascript">
$(function(){
	
	
	var AppPage = {
		loop:true,
		index:0,
		p:{x:0,y:0},
		start:false,
		pages:document.querySelectorAll(".page"),
		appHeight:$(window).height(),
		slideType:'',
		move:{x:0,y:0},
		moveWidth:100,
		currentPage:function(){
			return $(this.pages[this.index]);
		},
		nextPage:function(){
			if(this.move.y > this.moveWidth){
				if(this.index == this.pages.length - 1)
					return $(this.pages[0]);
				return $(this.pages[this.index + 1]);
			}
			if(this.move.y < this.moveWidth*-1){
				if(this.index == 0)
					return $(this.pages[this.pages.length -1]);
				return $(this.pages[this.index - 1]);
			}
		},
		addTranslateY:function($page,y){
			$page.css({'-webkit-transform':'translateY('+y+'px)','transform':'translateY('+y+'px)','-webkit-transition': 'none','transition': 'none;'});
		},
		touchStart:function(e){
			var p = e.changedTouches[0];
			this.start = true;
			this.p.x = p.pageX;
			this.p.y = p.pageY;
			this.move.x = 0;
			this.move.y = 0;
		},
		touchMove:function(e){
			if(!this.start)
				return;
			var p = e.changedTouches[0];
			this.move.x = this.p.x - p.pageX;
			this.move.y = this.p.y - p.pageY;
			var page = this.currentPage();
			var pageNext = this.nextPage();
			if(!page || !pageNext)
				return;
			pageNext.addClass("page-move");
			if(this.move.y > this.moveWidth){
				this.addTranslateY(page,this.move.y*-1);
				this.addTranslateY(pageNext,this.move.y*-1+ this.appHeight);
			}
			if(this.move.y < this.moveWidth*-1){
				this.addTranslateY(page,this.move.y*-1);
				this.addTranslateY(pageNext,this.appHeight*-1-this.move.y);
			}
		},
		touchEnd:function(e){
			this.start = false;
			var page = this.currentPage();
			var pageNext = this.nextPage();
			console.log(this);
			var flag = false;
			if(!page || !pageNext)
				return;
			if(this.move.y > this.moveWidth && this.move.y != 0){
				this.addTranslateY(page, this.appHeight*-1);
				this.addTranslateY(pageNext,0);
				flag = true;
				if(this.index == this.pages.length -1)
					this.index = 0;
				else
					this.index++;
			}
			if(this.move.y < this.moveWidth*-1 && this.move.y != 0){
				this.addTranslateY(pageNext,0);
				this.addTranslateY(page,this.appHeight);
				flag = true;
				if(this.index == 0)
					this.index = this.pages.length -1;
				else
					this.index--;
			}
			if(flag){
				page.css({'-webkit-transition': '-webkit-transform 0.3s ease-out','transition': 'transform 0.3s ease-out',});
				pageNext.css({'-webkit-transition': '-webkit-transform 0.3s ease-out','transition': 'transform 0.3s ease-out',});
				setTimeout(function(){page.removeClass("page-move");},300);
			}
			//console.log(this);
		},
		run:function(){
			var $this = this;
			var eventListener = function(type,listener){
				//var app = document.getElementById("app");
				document.body.addEventListener(type, listener,false);
			};
			eventListener("touchstart",function(e){
				$this.touchStart(e);
			});
			eventListener("touchmove",function(e){
				e.preventDefault();
				$this.touchMove(e);
			});
			eventListener("touchend",function(e){
				$this.touchEnd(e);
			});
		}
	};
	
	AppPage.slideType = "Y";
	AppPage.run();

});
</script>
</body>
</html>